<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 属性选择器</title>
    <style type="text/css">
       /*  我们希望 包含 title 属性的所有元素变为红色 也可以省略通配符 * */
        *[title]{
            color: red;
        }

        a[href]{
            color: #7a991a;
        }

        /* 将同时 设置了 href 和 title 属性的html 超链接文本设置样式 和顺序无关 */
        a[href][title]{
            font-style: italic;
            font-weight: bold;
            color: #8235bd;
        }
        /* 我们在img 中测试一下*/
        img[alt]{
            border: 5px solid red;
        }

        /*  我们还可以只选择指定的元素  不仅指定key 也指定value  */
        a[href="http:wwww.delong.com"]{
            color: #00ff00;
        }

        /* 注意和 class 类型还是有区别*/
        p[class="important warning"]
        {
           color: red;
        }

        /*  选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点： 也就是使用 ~=
            如果没有 ~ 号认为是 完全匹配  什么还要有 "~=" 属性选择器呢？因为它能用于任何属性 会把包含 importtant的
            的元素全算进去
        */
        p[class~="important"] {  color: #ff00ff;}

       img[title~="Figure"]
       {
           border: 1px solid #ff00ff;
       }
        /*
          子串匹配属性选择器  和 正则匹配差不多  仁和属性都可以使用这些选择器
           [abc^="def"]	选择 abc 属性值以 "def" 开头的所有元素
           [abc$="def"]	选择 abc 属性值以 "def" 结尾的所有元素
           [abc*="def"]	选择 abc 属性值中包含子串 "def" 的所有元素
        */
       a[href*="w3school.com.cn"] {color: red;}

        /*  特定属性选择类型
        *[lang|="en"] {color: red;}
        上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。
           因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
        */

        /*
        最后笔者认为 从选择器的规则看来我们在  命名时 未来将来可能同意修改的方便  尽量 往选择器支持的 方式靠拢

        */
    </style>
</head>
<body>
    <h2 title="Hello world">Hello world</h2>
    <a title="W3School" href="http://w3school.com.cn">W3School</a>   <!--  在标签中显示的写了 title 属性-->
    <hr />
    <h1>无法应用样式：</h1>
    <h2>Hello world</h2>
    <a href="http://w3school.com.cn">W3School</a>
    <hr/>
    <a title="ddd" href="http://www.baidu.com">百度一下,你就知道</a>
    <a href="http://www.baidu.com" title="ddd">百度一下,你就知道</a>
    <hr/>
    <!-- 特例更适合用来 诊断而不是设计 来确定图像是否确实有效 有效就会显示边框-->
    <img src="../images/w3school_logo_black.gif" alt="W3School">
    <img src="../images/w3school_logo_black.gif">

    <!--  我们 -->
    <a href="http:wwww.delong.com">HTML</a>

    <!--  注意和单独的class 的区别-->
    <h1>可以应用样式：</h1>
    <p class="important warning">This is a paragraph.</a>

    <hr />

    <h1>无法应用样式：</h1>
    <p class="important">This is a paragraph.</a>

    <h1>包含 Figure 的都会被应用</h1>
    <img title="Figure 1" src="../images/w3school_logo_black.gif" />
    <img title="Figure 2" src="../images/w3school_logo_black.gif" />

    <hr />

    <h1>不包含 Figure 的或者 没有title 的都不会应用 </h1>
    <img src="../images/w3school_logo_black.gif" />
    <img src="../images/w3school_logo_black.gif" />

    <!-- 特定属性选择器 -->
    <p lang="en">Hello!</p>
    <p lang="en-us">Greetings!</p>
    <p lang="en-au">G'day!</p>
    <p lang="fr">Bonjour!</p>
    <p lang="cy-en">Jrooana!</p>



</body>
</html>